<template>
	<view class="page">
		<l-loading v-if="!loadEnd" />
		<template v-else>
			<view class="top-bg"></view>
			<view class="user-info">
				<view class="user-info_name">{{orderInfo.consignee}} {{orderInfo.mobile}}</view>
				<view class="user-info_site">{{orderInfo.full_region}}{{orderInfo.address}}</view>
			</view>
			<u-gap height="20rpx" bgColor="#eeeeee"></u-gap>
			<view class="order-info">
				<view class="order-info_title">
					<text class="order-number">订单号{{orderInfo.order_id}}</text>
					<text class="order-status">{{orderInfo.order_status_text}}</text>
				</view>
				<u-line color="#eeeeee"></u-line>
				<view class="order-list">
					<block v-for="(item,index) in orderGoods" :key="item.id">
					<view class="order-list_item">
						<view class="item-left">
							<image class="item-left_cover" :src="item.list_pic_url"></image>
						</view>
						<view class="item-right">
							<view class="item-right_top">
								<view class="u-line-1 goods-name">{{item.goods_name}}</view>
								<view class="goods-num">*{{item.number}}</view>
							</view>
							<view class="item-right_bottom">
								<text class="goods-price">￥{{item.retail_price}}</text>
								<view class="goods-btn">查看评价</view>
							</view>
						</view>
					</view>
					<u-line color="#eeeeee"></u-line>
					</block>
				</view>
			</view>
			<u-gap height="20rpx" bgColor="#eeeeee"></u-gap>
			<view class="order-time">
				<view class="order-time_date">下单时间: {{orderInfo.add_time}}</view>
				<view class="order-time_number">订单编号: {{orderInfo.order_id}}</view>
			</view>
			<u-gap height="20rpx" bgColor="#eeeeee"></u-gap>
			<view class="pay-info">
				<view class="pay-info_text">支付方式: {{payInfo.path}}</view>
				<view class="pay-info_text">商品金额: {{payInfo.goods_amount}}</view>
				<view class="pay-info_text">运费: {{payInfo.deliver_cost}}</view>
				<view class="pay-info_text">订单合计: {{payInfo.cost}}</view>
				<view class="pay-btn">
					<view class="pay-btn_text">物流追踪</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import {getOrderDetailsApi} from '@/api/order.js'
	export default {
		computed: {
			...mapState(['user_id','token'])
		},
		data() {
			return {
				order_id: '',
				orderInfo: {},
				orderGoods: [],
				payInfo: {},
				loadEnd: false
			};
		},
		onLoad({order_id = ''}) {
			this.order_id = order_id
			this.getListData()
		},
		methods: {
			async getListData() {
				const res = await getOrderDetailsApi({
					user_id: this.user_id,
					token: this.token,
					orderId: this.order_id
				})
				this.loadEnd = true
				const {a = {},orderInfo = {},orderGoods = []} = res.data
				this.payInfo = a
				this.orderInfo = orderInfo
				this.orderGoods = orderGoods
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/pages/aPackage/orderDetail/orderDetail.scss'
</style>
